<template>
  <div class="exercise-page">
    <Header title="练习页面" go-back="true"></Header>
    <div class="container">
      <!--九宫格-->
      <div class="sudoku_row">
        <div class="sudoku_item " :class="curSelect==sudoku.id?'opacity':''" v-for="(sudoku,index) in sudokus" :key="index" @touchstart="touchstart(index)" @touchend="touchend"  @click="$router.push(sudoku.routeUrl)">
          <!--iView的icon图标应用-->
          <Icon size="35" :type="sudoku.icon" />
          {{sudoku.name}}
        </div>
      </div>
      <!--iView grid 栅格 在非template/render的模式下需要加前缀i-->
      <div class="grid">
        <!--gutter：为col之间的间隔-->
        <Row :gutter="5">
          <!--col的总和为24 push(向右)和pull(向左)：改变栅格的顺序  offset：向右偏移-->
          <i-col span="6" push="6">
            <div class="grid_div">col-61</div>
          </i-col>
          <i-col span="6" pull="6">
            <div class="grid_div">col-62</div>
          </i-col>
          <i-col span="6">
            <div class="grid_div">col-63</div>
          </i-col>
          <i-col span="6">
            <div class="grid_div">col-64</div>
          </i-col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
export default {
  name: 'exercisePage',
  data () {
    return {
      sudokus: [{
        id: 0,
        name: 'BOX1',
        icon: 'ios-unlock-outline',
        routeUrl: '/ChildPage1'
      }, {
        id: 1,
        name: 'BOX2',
        icon: 'ios-paw-outline',
        routeUrl: '/ChildPage2'
      }, {
        id: 2,
        name: 'BOX3',
        icon: 'ios-videocam-outline',
        routeUrl: '/ChildPage3'
      }, {
        id: 3,
        name: 'BOX4',
        icon: 'ios-time-outline',
        routeUrl: '/login'
      }, {
        id: 4,
        name: 'BOX5',
        icon: 'ios-tennisball-outline',
        routeUrl: '/Box5'
      }, {
        id: 5,
        name: 'BOX6',
        icon: 'ios-sunny-outline',
        routeUrl: '/Box6'
      }, {
        id: 6,
        name: 'BOX7',
        icon: 'ios-stopwatch-outline',
        routeUrl: '/Box7'
      }, {
        id: 7,
        name: 'BOX8',
        icon: 'ios-star-outline',
        routeUrl: '/Box8'
      }, {
        id: 8,
        name: 'BOX9',
        icon: 'ios-snow-outline',
        routeUrl: '/Box9'
      }, {
        id: 9,
        name: 'BOX10',
        icon: 'ios-settings-outline',
        routeUrl: '/Box10'
      }, {
        id: 10,
        name: 'BOX11',
        icon: 'ios-ribbon-outline',
        routeUrl: '/Box11'
      }],
      curSelect: null
    }
  },
  methods: {
    touchend () {
      var that = this
      that.curSelect = null
    },
    touchstart (e) {
      var that = this
      var list = that.sudokus
      for (var i = 0, len = list.length; i < len; i++) {
        if (list[i].id === e) {
          that.curSelect = i
        }
      }
    }
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.exercise-page{
  width: 100%;
  padding-top: 50px;
  .container{
    width: 100%;
    .sudoku_row{
      display: flex;
      align-items: center;
      width:100%;
      flex-wrap: wrap;
      .sudoku_item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width:25%;
        padding-top: 10px;
        padding-bottom: 10px;
        img{
          margin-bottom: 3px;
          display: block;
        }
      }
      /*九宫格点击时的样式*/
      .opacity{
        opacity: 0.4;
        background: #e5e5e5;
      }
    }
    .grid{
      padding-top: 10px;
      .ivu-row{
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .ivu-col-span-6 .grid_div{
        text-align: center;
        border: 1px solid #333;
        height: 50px;
      }
    }
  }
}
</style>
